<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="layui/css/layui.css" type="text/css" />
	<style type="text/css">
		.layui-table-page {text-align: center;}
		.layui-table-view {margin: 0}
	</style>
</head>
<body>
	<ul class="layui-nav" style="text-align: center">
		<li class="layui-nav-item">
			<a href="emps.html">员工</a>
		</li>
		<li class="layui-nav-item layui-this">
			<a href="depts.html">部门</a>
		</li>
	</ul>
	<table class="layui-hide" id="list" lay-filter="list"></table>
	<script type="text/html" id="toolbar">
		<button class="layui-btn layui-btn-sm" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>添加
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">
			<i class="layui-icon layui-icon-delete"></i>删除
		</button>
	</script>
	<script type="text/html" id="bar">
		<button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
			<i class="layui-icon layui-icon-edit"></i>编辑
		</button>
	</script>
</body>
<script src="jquery/jquery.min.js" type="text/javascript"></script>
<script src="layui/layui.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<script>
	layui.use("element", function () {
		var element = layui.element;
	});
	
	function initTable() {
		layui.use("table", function () {
			var table = layui.table;
			table.render({
				elem: '#list',
				height: 524,
				url: baseUrl + "depts",
				toolbar: "#toolbar",
				request: {
					pageName: 'pageNum',
					limitName: 'pageSize'
				}, cols: [[
					{type: 'checkbox', fixed: 'left'},
					{field:'deptId', title:'部门ID', align: "center"},
					{field:'deptName', title:'部门名', align: "center"},
					{title:'部门状态', align: "center",
						templet: function (d) {
							switch (d.deptStatus) {
								case 0:
									return "未启用";
								case 1:
									return "已启用";
							}
						}
					},
					{fixed: "right", title: "操作", align: "center", toolbar: "#bar"}
				]], page: {layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']},
				parseData: function (res) {
					return {
						"code": 0,
						"count": res.data.total,
						"data": res.data.list
					};
				}
			});

			table.on("toolbar(list)", function (obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case "add":
						layer.prompt({title: '输入新部门名'},
							function (text, index) {
								$.ajax({
									url: baseUrl + "checkDept/" + text,
									success: function (res) {
										if (res.code === 200) {
											$.ajax({
												url: baseUrl + "dept/" + text,
												type: "post",
												contentType: "application/json",
												success: function (res) {
													if (res.code === 200) {
														layer.close(index);
														layer.msg(res.msg, {icon: 1, time: 1000});
														setTimeout(function () {
															initTable();
														}, 1000);
													} else layer.msg(res.msg);
												}
											});
										} else layer.msg(res.msg);
									}
								});
							}
						);
						break;
					case "del":
						var data = checkStatus.data;
						if (data.length === 0) {
							layer.msg("请选择要删除的部门");
							return false;
						}
						var names = [];
						$.each(data, function (index, item) {
							names.push(item.deptName);
						});
						layer.confirm("确认要删除"+names+"吗？", {icon: 3},
							function (index) {
								$.ajax({
									url: baseUrl + "dept",
									type: "delete",
									data: JSON.stringify(data),
									contentType: "application/json",
									success: function () {
										layer.close(index);
										layer.msg("删除成功！", {icon: 1, time: 1000});
										setTimeout(function () {
											initTable();
										}, 1000);
									}
								});
							},
							function (index) {layer.close(index);}
						);
						break;
				}
			});
			
			table.on("tool(list)", function (obj) {
				var data = obj.data;
				if (obj.event === "edit") {
					layer.prompt({
						title: '输入新部门名',
						value: data.deptName
					}, function (text, index) {
						$.ajax({
							url: baseUrl + "checkDept/" + text + "/" + data.deptId,
							success: function (res) {
								if (res.code === 200) {
									$.ajax({
										url: baseUrl + "dept/" + text + "/" + data.deptId,
										type: "put",
										success: function (res) {
											layer.close(index);
											layer.msg(res.msg, {icon: 1, time: 1000});
											setTimeout(function () {
												initTable();
											}, 1000);
										}
									});
								} else layer.msg(res.msg);
							}
						});
					});
				}
			});
		});
	}
	initTable();
</script>
</html>